<template>
  <div class="wp">
     
      <div class="up">
          <!-- 当前位置 -->
          <div class="up-up">
              <p>您的当前位置：首页 > 
                  <span>全部商品</span> >
                  <span>苹果</span> >
                  <span>优鲜保障</span>
              </p>
          </div>
          <!-- 放大镜 -->
          <div class="fangda">
              <!-- 商品详情上方 -->
              <div class="fangda-up">
                  <div class="img">
                  <img src="./img/jfx1.jpg" alt="">
                  </div>
                  <div class="right">
                        <div class="right-up">
                            <h3>新疆哈密瓜1500kg</h3>
                            <div class="mai">
                                <div>
                                    <img src="./img/jfx2.jpg" alt="">
                                    <span class="zishen">资深买家</span>
                                </div>
                                <p>雀斑石榴持续热卖！云南蒙自石榴，原产波斯（今伊朗）一带，公元前二世纪时传入我国。是中国三大石榴之一，粒大皮薄，汁多味甜爽口。雀斑石榴持续热卖！云南蒙自石榴，原产波斯（今伊朗）一带，公元前二世纪时传入我国。是中国三大石榴之一，粒大皮薄，汁多味甜爽口。
                                </p>
                            </div>
                        </div>
                         <p>500积分 <span>价格：￥20.00</span> </p>
                         <div class="xuanze">
                             <p>请选择规格
                                 <span :class='aa==true?"xuanzhong":""' @click="btn1">500g</span>
                                 <span :class='bb==true?"xuanzhong":""' @click="btn2">1000g</span>
                                 <span :class='cc==true?"xuanzhong":""' @click="btn3">2000g</span>
                             </p>
                             <p>请选择规格
                                 <span :class='dd==true?"xuanzhong":""' @click="btn4">500g</span>
                                 <span :class='ff==true?"xuanzhong":""' @click="btn5">1000g</span>
                             </p>
                         </div>
                         <div class="shuliang">
                             <div class="jjjj">
                                 数量：
                                 <span class="jian" @click="jian"></span>
                                 <span class="shu" id="shu">1</span>
                                 <span class="jia" @click="jia"></span>
                                 件
                             </div>
                             <span class="duihuan" @click="queren">立即兑换</span>
                         </div>
                    </div>
              </div>
              <!-- 商品详情下方 -->
              <div class="bottom">
                  <div class="lunbo">
                      <span><img src="./img/zuojiantou.jpg" alt=""></span>
                      <img src="./img/jfx1.jpg" alt="">
                      <img src="./img/jfx1.jpg" alt="">
                      <img src="./img/jfx1.jpg" alt="">
                      <img src="./img/jfx1.jpg" alt="">
                      <span><img src="./img/youjiantou.jpg" alt=""></span>
                  </div>
                  <div class="fenxang">
                      <span id="shoucang" @click="shoucang1"><img src="./img/fx1.jpg" alt=""></span>
                      <span id="shoucang1" @click="shoucang"><img src="./img/fx2.jpg" alt=""></span>
                      <p class="shou">收藏此商品</p>
                      <p class="xiang">分享到:</p>
                      <span>
                      <img src="./img/fx3.jpg" alt=""></span>
                      <span>
                      <img src="./img/fx4.jpg" alt=""></span>
                      <span>
                      <img src="./img/fx5.jpg" alt=""></span>
                      <span>
                      <img src="./img/fx6.jpg" alt=""></span>
                      <span>
                      <img src="./img/fx7.jpg" alt=""></span>
                  </div>
              </div>
          </div>
          <!-- tab切换 -->
          <div class="tab">
              <div class="tab-shang">
                  <div class="tab-wp">
                      <span id="xiang" @click="ycc">商品详情</span>
                      <span id="ping"  @click="yc">商品评价</span>
                      <div class="bg"></div>
                  </div>
                  <div id="btn1">

                  
                  <div class="xiangqing">
                      <h3>男士短衬衫</h3>
                      <p>
                          明水礼盒十分优秀，是送朋友，送亲人的不二选择。<br>
                          什么，您还不知道明水礼盒，今年过年不收礼，收礼只收明水礼盒，OUT了吧，赶紧买起礼盒送亲朋，送好友吧。<br>
                          完成交易，如有剩余库存，从新上架产品
                      </p>
                      <div class="xiangqing-img">
                          <img src="./img/fx8.jpg" alt="">
                      </div>
                  </div>
                  <div class="xiangqing">
                      <h3>男士短衬衫</h3>
                      <p>
                          明水礼盒十分优秀，是送朋友，送亲人的不二选择。<br>
                          什么，您还不知道明水礼盒，今年过年不收礼，收礼只收明水礼盒，OUT了吧，赶紧买起礼盒送亲朋，送好友吧。<br>
                          完成交易，如有剩余库存，从新上架产品
                      </p>
                      <div class="xiangqing-img">
                          <img src="./img/fx8.jpg" alt="">
                      </div>
                  </div>
                  </div>
              </div>
              
              <div class="pingjia" id="btn2">
                      <ul>
                          <li>
                              <div class="touxiang">
                                  <img src="./img/touxiang1.jpg" alt="">
                                  <p>158****0203</p>
                              </div>
                              <div class="txright">
                                  <div class="txright-up">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x2.jpg" alt="">
                                  </div>
                                  <p>帮同事买的，很不错，性价比高</p>
                                  <div class="txright-bo">
                                      <img src="./img/touxiang2.jpg" alt="">
                                      <img src="./img/touxiang2.jpg" alt="">
                                      <img src="./img/touxiang2.jpg" alt="">
                                      <img src="./img/touxiang2.jpg" alt="">
                                  </div>
                              </div>
                          </li>
                          <li>
                              <div class="touxiang">
                                  <img src="./img/touxiang1.jpg" alt="">
                                  <p>158****0203</p>
                              </div>
                              <div class="txright">
                                  <div class="txright-up">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x2.jpg" alt="">
                                  </div>
                                  <p>帮同事买的，很不错，性价比高</p>
                              </div>
                          </li>
                          <li>
                              <div class="touxiang">
                                  <img src="./img/touxiang1.jpg" alt="">
                                  <p>158****0203</p>
                              </div>
                              <div class="txright">
                                  <div class="txright-up">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x2.jpg" alt="">
                                  </div>
                                  <p>帮同事买的，很不错，性价比高</p>
                                  <div class="txright-bo">
                                      <img src="./img/touxiang2.jpg" alt="">
                                      <img src="./img/touxiang2.jpg" alt="">
                                      <img src="./img/touxiang2.jpg" alt="">
                                      <img src="./img/touxiang2.jpg" alt="">
                                  </div>
                              </div>
                          </li>
                          <li>
                              <div class="touxiang">
                                  <img src="./img/touxiang1.jpg" alt="">
                                  <p>158****0203</p>
                              </div>
                              <div class="txright">
                                  <div class="txright-up">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x1.jpg" alt="">
                                      <img src="./img/x2.jpg" alt="">
                                  </div>
                                  <p>帮同事买的，很不错，性价比高</p>
                              </div>
                          </li>
                      </ul>
              </div> 

          </div> 
      </div>
  </div>
</template>

<script>
 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'

let xiang = document.getElementById("xiang")
let btn1 = document.getElementById("btn1")
export default {
    name:'jifenxq',
    data(){
        return{
          aa:true,
          bb:false,
          cc:false,
          dd:false,
          ff:false,
          num:1,
        }
    },
    components: {
      Swiper,
      SwiperSlide,
      
    },
    methods:{
        yc(){
            document.querySelector('#btn1').style.display= "none"
            document.querySelector('#btn2').style.display= "block"
            document.querySelector('#xiang').style.background = "#f4f4f4"
            document.querySelector('#xiang').style.border = "1px #e4e4e4 solid"
            document.querySelector('#xiang').style.color = "#333"

            document.querySelector('#ping').style.background = "#fff"
            document.querySelector('#ping').style.borderTop = "2px #498e3d solid"
            document.querySelector('#ping').style.color = "#498e3d"
        },
        ycc(){
            document.querySelector('#btn2').style.display= "none"
            document.querySelector('#btn1').style.display= "block"
            document.querySelector('#ping').style.background = "#f4f4f4"
            document.querySelector('#ping').style.border = "1px #e4e4e4 solid"
            document.querySelector('#ping').style.color = "#333"

            document.querySelector('#xiang').style.background = "#fff"
            document.querySelector('#xiang').style.borderTop = "2px #498e3d solid"
            document.querySelector('#xiang').style.color = "#498e3d"
        },
        queren(){
            this.$router.push('/order')
        },
        btn1(){
            this.aa=true
            this.bb=false
            this.cc=false
            this.dd=false
            this.ff=false
        },
        btn2(){
            this.aa=false
            this.bb=true
            this.cc=false
            this.dd=false
            this.ff=false
        },
        btn3(){
            this.aa=false
            this.bb=false
            this.cc=true
            this.dd=false
            this.ff=false
        },
        btn4(){
            this.aa=false
            this.bb=false
            this.cc=false
            this.dd=true
            this.ff=false
        },
        btn5(){
            this.aa=false
            this.bb=false
            this.cc=false
            this.dd=false
            this.ff=true
        },
        shoucang(){
            document.querySelector('#shoucang1').style.display= "none"
            document.querySelector('#shoucang').style.display= "block"
        },
        shoucang1(){
            document.querySelector('#shoucang').style.display= "none"
            document.querySelector('#shoucang1').style.display= "block"
        },
        jia(){
            var aanum = ++this.num
            let shu = document.querySelector('#shu');
            shu.innerHTML = aanum
            console.log(aanum)
            
           
        },
        jian(){
            let nums = --this.num
            let shu = document.querySelector('#shu');
            if(nums>=1){
            shu.innerHTML= nums;
            }else if(nums<1){
                ++this.num
                shu.innerHTML= nums+1;
                alert('数量不能小于1')
            }
            console.log(nums)
        }

    }
}
</script>

<style scoped>


/*  */
#shoucang{
    display: none;
}


/* tab切换 切换页面*/
.pingjia ul{
    margin-left: 20px;
    margin-top: 40px;
    margin-right: 20px;
}
.pingjia ul li{
    border-bottom: 1px #999 solid;
    display: flex;
    padding-left: 20px;
    height: 160px;
    margin-top: 10px;
}
.txright{
    margin-left: 20px;
}
.txright p{
    margin-top: 10px;
}
.txright-bo{
    margin-top: 10px;
}
/* tab切换 默认页面*/

.pingjia{
    display: none;
}
.tab{
    border: 1px #e4e4e4 solid;
    border-top: none;
    margin-top: 40px;
    padding-bottom: 40px;
}
.tab-wp{
    height: 50px;
    display: flex;
}
.tab .tab-wp .bg{
    width: 100%;
    height: 50px;
    background: #f4f4f4;
    border-bottom: 1px #e4e4e4 solid;
    border-top: 1px #e4e4e4 solid;
}
#xiang{
    display: inline-block;
    border-top: 1px;
    color: #498e3d;
    font-size: 18px;
    height: 50px;
    width: 125px;
    background: #fff;
    text-align: center;
    line-height: 50px;
    border-top: 2px #498e3d solid;
    cursor: pointer;
}
#ping{
    display: inline-block;
    border-top: 1px;
    color: #323333;
    font-size: 18px;
    border: 1px #e4e4e4 solid;
    background: #f4f4f4;
    text-align: center;
    line-height: 50px;
    height: 50px;
    width: 125px;
    cursor: pointer;
}
.xiangqing{
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 40px;
}
.xiangqing h3{
    margin-bottom: 10px;
    color: #ec6a17;
    font-size: 18px;
    font-weight: 100;
}
.xiangqing>p{
    font-size: 16px;
    color: #666;
    line-height: 36px;
}
.xiangqing .xiangqing-img{
    margin-top: 30px;
}



/*  */
.wp{
    width: 1280px;
    margin: 0 auto;
}
.up{
    border-top: 1px #e4e4e4 solid;
    margin: 0 auto;
    text-align: left;
}
.up-up{
    width: 1280px;
    background: #f4f4f4;
    font-size: 14px;
    color: #666;
    height: 55px;
    margin: 0 auto;
    margin-top: 20px;
    line-height: 55px;
}
.up-up p span{
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
}
.up-up p{
    margin-left: 25px;
}
.fangda{
    margin-top: 20px;
}
.fangda .fangda-up>.img{
    width: 500px;
    height: 500px;
}
.fangda .fangda-up>.img img{
    width: 500px;
    height: 500px;
}
.fangda-up {
    display: flex;
}
.right{
    margin-left: 40px;
    width: 100%;
}

.right-up>h3{
    font-size: 24px;
    font-weight: 100;
    color: #333;
    height: 60px;
    line-height: 60px;
}
.mai{
    display: flex;
    height: 180px;
    border-bottom: 1px #ededed solid;
    border-top: 1px #ededed solid;
}
.mai p{
    margin-top: 40px;
    font-size: 16px;
    color: #666;
    margin-left: 30px;
    line-height: 28px;
}
.mai>div{
    margin-top: 20px;
}
.mai>div>img{
    margin-left: 10px;
}
.zishen{
    display: block;
    font-size: 16px;
    color: #333;
    background: #ffe313;
    border-radius: 15px;
    width: 120px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}
.right>p{
    margin-top: 30px;
    font-size: 30px;
    color: #ff5757;
}
.right>p span{
    font-size: 18px;
    color: #666;
    margin-left: 30px;
}
.xuanze {
    margin-top: 20px;
}
.xuanze p{
    margin-top: 20px;
    font-size: 18px;
    color: #666;
    line-height: 32px;
}

.xuanze p>span{
    display: inline-block;
    width: 80px;
    height: 32px;
    border: 1px #d4d4d4 solid;
    margin-left: 20px;
    text-align: center;
    cursor: pointer;
}
.xuanze p>.xuanzhong{
    border: 1px #4b943d solid;
    background: #f4fff2;
}
/*  */

.shuliang{
    display: flex;
    margin-top: 30px;
    height: 50px;
}
.shuliang>.jjjj{
    display: flex;
    line-height: 32px;
    margin-top: 9px;
}
.jian{
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(./img/jian.jpg);
    border:1px #d3d3d3 solid;
    color: #f2f2f2;
    cursor: pointer;
    /* margin-top: 20px; */
}
.jia{
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(./img/jia.jpg);
    border:1px #d3d3d3 solid;
    color: #f2f2f2;
    cursor: pointer;
}
.shu{
   display: inline-block;
    width: 32px;
    height: 32px;
    border-top:1px #d3d3d3 solid;
    border-bottom:1px #d3d3d3 solid;
    text-align: center;
}
.shuliang>span{
    width: 150px;
    height: 50px;
    border-radius: 5px;
    background: #f08200;
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    margin-left: 40px;
    cursor: pointer;
}
/* 下方 */
.bottom {
    margin-top: 40px;
    display: flex;
}
.lunbo{
    width: 500px;
    display: flex;
    justify-content: space-between;
}
.lunbo>img{
    width: 90px;
    height: 90px;
}
.lunbo>span{
    display: inline-block;
    width: 25px;
    height: 40px;
    margin-top: 20px;
}
.fenxang{
    margin-left: 40px;
    margin-top: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    /* border: 1px #f00 solid; */
    display: flex;
}
.fenxang p{
    display: block;
    font-size: 16px;
    color: #333;
    height: 30px;
    line-height: 25px;
}
.fenxang span{
    cursor: pointer;
}
.fenxang .shou{
    margin-right: 30px;
}
.fenxang .xiang{
    margin-right: 10px;
}
</style>